<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
<div class="nav">
    <img src="img/1000.webp" alt="">
    <span class="title">我的博客系统</span>
   <div class="spacer" ></div>
    <a href="blog_list.html">主页</a>
    <a href="bolg_edit.html">写博客</a>
    <a href="#">注销</a>
</div>


    <!--这个div 表示页面的主区域（版心) -->
    <div class="container">
        <!-- 左侧的用户信息 -->
        <div class="container-left">
<!-- 用这个元素表示元素的信息 -->
            <div class="card">
<!-- 用户的头像-->
<img src="img/3.webp" alt="">
<!--用户的名字-->
                <h3>王同学</h3>
             <a href="#">github 地址</a>
                <div class="counter">
<!--span默认是行内元素（也不是永久)，随时都可以改的
div 默认是块级元素（也不是永久)-->
<!--行内元素无法设置尺寸 无法设置外边距 内边距左右能设置 上下不能设置-->

<!-- 盒子模型  外边距 + 边框 + 内边距 + 内容 -->


<!--display flex 不是子类
display : flex 是对子元素起作用
display : block 只对自己有用
-->
                   <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>



            </div>

        </div>
<!--右侧内容区域-->
        <div class="cntainer-right">
<!-- 每个 .blog 用来表示一篇博客-->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起 我要当卷王！
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>

            <!-- 每个 .blog 用来表示一篇博客-->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起 我要当卷王！
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <!-- 每个 .blog 用来表示一篇博客-->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起 我要当卷王！
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <!-- 每个 .blog 用来表示一篇博客-->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起 我要当卷王！
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <!-- 每个 .blog 用来表示一篇博客-->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起 我要当卷王！
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>
</body>
</html>